import axios from 'axios'
import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { List } from 'react-vant'

export interface ListItem {
  id: number
  title: string
  image: string
  word: string
  price: number
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListItem[]>([])
  const [pageCode, setPageCode] = useState(1)
  const getList = async () => {
    const resp = await axios.get('/api/list', { params: { pageCode } })
    setList(list.concat(resp.data.list))
    setPageCode(pageCode + 1)
  }
  return (
    <div>
      <List onLoad={getList}>
        {list.map((v) => {
          return (
            <NavLink
              to={{
                pathname: `/detail/${v.id}`,
              }}
            >
              <dl style={{ display: 'flex' }} key={v.id}>
                <dt>
                  <img src={v.image} alt="" />
                </dt>
                <dd>
                  <h3>{v.title}</h3>
                  <p>{v.word}</p>
                  <span>{v.price}</span>
                </dd>
              </dl>
            </NavLink>
          )
        })}
      </List>
    </div>
  )
}

export default Index
